<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="icon" href="/static/img/logo.png" type="image/png">
    
    <!-- 字体预加载优化 -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    
    <!-- 样式表 -->
    <link rel="stylesheet" href="/static/css/mobile/common.css">
    <link rel="stylesheet" href="/static/css/mobile/quiz-detail.css">
    <link rel="stylesheet" href="/static/css/markdown.css">
    
    <!-- KaTeX数学公式支持 - 优化加载 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"></noscript>
    
    <!-- KaTeX 字体预加载 -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts/KaTeX_Main-Regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/fonts/KaTeX_Math-Italic.woff2" as="font" type="font/woff2" crossorigin>
    
    <!-- Markdown解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
    <title>答题详情 - 智慧答题系统</title>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="mobile-header">
        <div class="header-left">
            <button class="back-btn" onclick="window.history.back()"><img src="/static/img/back.png" alt="返回" style="width: 24px; height: auto;"></button>
            <span class="header-title">答题详情</span>
        </div>
    </div>

    <div class="page-wrapper">
        <div class="container">
            <!-- 成绩概览 -->
            <div class="score-overview">
                <div class="score-main">
                    <div class="score-value" id="scoreValue">0</div>
                    <div class="score-label">总分</div>
                </div>
                <div class="score-details">
                    <div class="detail-item">
                        <span class="detail-icon correct">✓</span>
                        <span class="detail-text">答对 <strong id="correctCount">0</strong> 题</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon wrong">✗</span>
                        <span class="detail-text">答错 <strong id="wrongCount">0</strong> 题</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-icon">⏱</span>
                        <span class="detail-text">用时 <strong id="timeUsed">00:00</strong></span>
                    </div>
                </div>
            </div>

            <!-- 题目列表 -->
            <div class="questions-list" id="questionsList">
                <!-- 题目将动态加载 -->
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="mobile-nav">
        <a href="/" class="nav-item">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </a>
        <a href="/quiz" class="nav-item">
            <div class="nav-icon">📝</div>
            <div class="nav-label">答题</div>
        </a>
        <a href="/leaderboard" class="nav-item">
            <div class="nav-icon">🏆</div>
            <div class="nav-label">排行榜</div>
        </a>
        <a href="/profile" class="nav-item">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </a>
    </nav>

    <!-- KaTeX JavaScript - 异步加载 -->
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script async src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
    
    <script src="/static/js/mobile/quiz-detail.js"></script>
</body>
</html>

